import React, { PureComponent } from 'react';
import { Form, Button, Alert } from 'antd';

import { routerRedux } from 'dva/router';
import AttrSelectTransfer from './AttrSelectTransfer';

import styles from './style.less';

export default class Step2 extends PureComponent {
  state = {
    selectedKeys: [],
    // tagValue: ['示例属性1', '示例属性2'],
    typeVersion: 'v1.0.1-beta',
  }

  componentDidMount() {
    const { newType, dispatch } = this.props;
    if (!newType) {
      dispatch(routerRedux.push('/type/add'));
    }
  }

  onPrev = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/type/add'));
  }

  onResult = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux('/type/add/result'));
  }

  onValidateForm = (e) => {
    e.preventDefault();
    const { dispatch, newType } = this.props;
    const { validateFields } = this.props.form;
    const selectedKeys = [...this.state.selectedKeys];
    validateFields((err, values) => {
      if (!err && selectedKeys.length >= 3 && newType) {
        dispatch({
          type: 'assetType/submitTypeAttr',
          payload: {
            ...newType,
            ...values,
            version: this.state.typeVersion,
            type_attr: selectedKeys,
          },
          callback: this.onResult,
        });
      }
    });
  }

  tagUpdate = (e) => {
    const { setFieldsValue } = this.props.form;
    setFieldsValue({
      type_attr: e,
    });
  }

  handleSelectChange = (keys) => {
    this.setState({
      selectedKeys: keys,
    });
  }

  render() {
    const { formItemLayout, submitLoading } = this.props;
    return (
      <Form layout="horizontal" className={styles.stepForm}>
        <Alert
          closable
          showIcon
          message="配置类型属性后，资产将根据类型的属性来管理。"
          style={{ marginBottom: 24 }}
        />
        <AttrSelectTransfer
          handleChange={this.handleSelectChange}
        />
        <Form.Item
          style={{ marginBottom: 8 }}
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
          }}
        >
          <Button type="primary" onClick={this.onValidateForm} loading={submitLoading}>
            提交
          </Button>
          <Button onClick={this.onPrev} style={{ marginLeft: 8 }}>
            上一步
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

